<template>
  <div id="users" class="card col-12 px-0 mt-5">
    <nav aria-label="breadcrumb" role="navigation">
      <ol class="breadcrumb pb-0">
        <li class="breadcrumb-item ms-1">系统管理</li>
        <li class="breadcrumb-item">
          <router-link to="/h5/admin/users">员工</router-link>
        </li>
        <li class="breadcrumb-item active">详情</li>

        <span class="ms-auto me-1" @click.stop="back()">返回</span>
      </ol>
    </nav>
    <template v-if="user !== null">
      <div class="card-body">
        <dl class="row">
          <dt class="col-4 text-end">用户名</dt>
          <dd class="col-8">{{ user.username }}</dd>
          <dt class="col-4 text-end">全名</dt>
          <dd class="col-8">{{ user.empname }}</dd>
          <dt class="col-4 text-end">手机</dt>
          <dd class="col-8">{{ user.mobileNo }}</dd>
          <dt class="col-4 text-end">邮件</dt>
          <dd class="col-8">{{ user.email }}</dd>
          <dt class="col-4 text-end">客服组</dt>
          <dd class="col-8">{{ user.groupName }}</dd>

          <dt class="col-4 text-end">部门</dt>
          <dd class="col-8">
            <template v-for="info in user.departments">
              {{ info.name }},
            </template>
          </dd>
          <dt class="col-4 text-end">企业微信id</dt>
          <dd class="col-8">
            {{ user.wwUserId }}
            <span v-if="user.wwUserId.length > 0">
              <img :src="user.avatar" width="25" height="25" />
              <a
                href="javascript:void(0)"
                v-on:click="syncWwUser(user.id)"
                class="float-end"
                >同步</a
              >
            </span>
          </dd>
          <dt class="col-4 text-end">eterm用户名</dt>
          <dd class="col-8">
            <template v-if="user.etermUsername !== null">
              <template v-if="user.etermUsername.length > 10">
                <span :title="user.etermUsername"
                  >{{ user.etermUsername.substring(0, 10) }}...</span
                >
              </template>
              <template v-else>
                {{ user.etermUsername }}
              </template>
            </template>
          </dd>
          <dt class="col-4 text-end">状态</dt>
          <dd class="col-8">
            <span v-if="user.status === 1">正常</span>
            <span v-if="user.status === 4">停用</span>
          </dd>
        </dl>
      </div>
      <div class="card-footer row">
        <a
          href="javascript:void(0)"
          @click.stop="editUser()"
          class="btn btn-primary mb-2"
          >修改</a
        >
        <a
          href="javascript:void(0)"
          @click.stop="resetPassword()"
          class="btn btn-danger ms-auto me-auto"
          v-if="isAdmin"
          >重置密码</a
        >
      </div>
    </template>

    <my-modal-prompt ref="modalPrompt">
      <span slot="title">{{ modalTitle }}</span>
    </my-modal-prompt>
  </div>
</template>

<script>
import $ from "jquery";
import { mapActions } from "vuex";
import {
  searchUser,
  searchDepartments,
  deleteWwUser,
  syncWwUser,
  resetUserPassword,
} from "@/api/admin.js";
import MyModalPrompt from "@/components/modal/my-modal-prompt.vue";

export default {
  components: {
    MyModalPrompt,
  },
  data() {
    return {
      id: 0,

      modalTitle: "",

      user: null,
      deptIds: [],
      departments: [],
      syncWxWork: 1,
    };
  },
  computed: {
    isAdmin() {
      return this.$store.getters.isAdmin;
    },
  },
  mounted: function () {
    this.id = parseInt(this.$route.params.id);
    this.searchDetail();
  },
  methods: {
    ...mapActions(["showLoading", "hideLoading"]),
    back: function () {
      this.$router.go(-1);
    },
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    showSearch: function () {
      this.isSearchMode = true;
    },
    searchDetail: function () {
      searchUser(this.id, (v) => {
        this.user = v;
      });
    },
    editUser: function () {
      this.$router.push("/h5/admin/user?id=" + this.id);
    },
    searchDepartments: function () {
      const params = {
        "sc.pageNo": 1,
        "sc.pageSize": 500,
      };

      searchDepartments(params, (jsonResult) => {
        this.departments = jsonResult.dataList;
      });
    },
    delWwUser: function (index) {
      const info = this.userList[index];

      this.modalTitle = "确定从企业微信中删除该用户吗？";

      this.$refs.modalPrompt
        .modal()
        .then((remark) => {
          this.showLoading();
          const params = {
            id: info.id,
            remark: remark,
          };
          deleteWwUser(
            params,
            (v) => {
              if (v.status !== "OK") {
                this.showErrMsg(v.errmsg, "danger");
              } else {
                this.showErrMsg(v.desc);
                this.search();
              }
            },
            () => {
              this.hideLoading();
            }
          );
        })
        .catch((ex) => {});
    },
    syncWwUser: function (id) {
      // const info = this.userList[index]
      const params = {
        id: id,
      };

      syncWwUser(
        params,
        (v) => {
          if (v.status !== "OK") {
            this.showErrMsg("操作失败: " + v.errmsg, "danger");
          } else {
            this.showErrMsg(v.desc);
            this.search();
          }
        },
        () => {
          this.hideLoading();
        }
      );
    },
    resetPassword: function () {
      this.modalTitle =
        "重置用户(" + this.user.username + ")密码, 请输入新密码";

      this.$refs.modalPrompt
        .modal()
        .then((remark) => {
          this.showLoading();

          const params = {
            id: this.id,
            password: remark,
          };
          resetUserPassword(
            params,
            (v) => {
              if (v.status !== "OK") {
                this.showErrMsg(v.errmsg, "danger");
              } else {
                this.showErrMsg("操作成功");
                // this.search()
              }
            },
            () => {
              this.hideLoading();
            }
          );
        })
        .catch((ex) => {});
    },
  },
};
</script>
